<template>
    <div class="contract-setting-container">
        <!-- 顶部操作栏和标题部分 -->
        <div class="header-section">
            <!-- <select class="operation-select">
                <option>操作</option>
            </select> -->
            <h2>内部培训</h2>
        </div>
        <span class="date-and-number">
            <span>日期</span>
            <el-date-picker style="width: 10%;" type="date" v-model="formData.date" value-format="yyyy-MM-dd"
                readonly></el-date-picker>
            <!-- <input type="date" v-model="formData.date" readonly> -->
            <span>&emsp;编号</span>
            <input type="text" v-model="formData.number" readonly>
        </span>

        <!-- 培训基本信息部分 -->
        <div class="training-info">
            <div class="form-group">
                <label>主题
                    <input type="text" v-model="formData.theme" style="width: 90%;"></label>
            </div>
            <div class="form-group-row">
                <div class="form-group">
                    <label>开始时间
                        <!-- placeholder="选择面试时间"  -->
                        <el-date-picker type="datetime" v-model="formData.startTime" value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions" class="form-input"></el-date-picker></label>
                </div>
                <div class="form-group">
                    <label>结束时间
                        <!-- placeholder="选择面试时间" -->
                        <el-date-picker type="datetime" v-model="formData.endTime" value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="pickerOptions" class="form-input"></el-date-picker></label>
                </div>
                <div class="form-group">
                    <label>培训机构
                        <el-select v-model="formData.trainingOrganization">
                            <!-- <el-option value="">请选择</el-option> -->
                            <el-option label="销售部" value="销售部"></el-option>
                            <el-option label="财务部" value="财务部"></el-option>
                            <el-option label="总经办" value="总经办"></el-option>
                            <el-option label="采购部" value="采购部"></el-option>
                            <el-option label="行政部" value="行政部"></el-option>
                            <el-option label="人事部" value="人事部"></el-option>
                            <el-option label="生产部" value="生产部"></el-option>
                            <el-option label="产库部" value="产库部"></el-option>
                            <el-option label="研发部" value="研发部"></el-option>
                            <el-option label="测试" value="测试"></el-option>
                        </el-select></label>
                </div>
                <!-- <div class="form-group-row"> -->
                <div class="form-group">
                    <label>培训地点
                        <input type="text" v-model="formData.trainingLocation"></label>
                </div>
                <div class="form-group">
                    <label>培训人数
                        <input type="text" v-model="formData.trainingNumber"></label>
                </div>
                <!-- </div> -->
            </div>
            <div class="form-group">
                <label style="display: inline-flex;">
                    备注&ensp;
                    <textarea rows="5" v-model="formData.remark"
                        style="width: calc(1097.33px - 16px);font-family: '宋体';color: #000; padding: 10px;"></textarea>
                </label>
            </div>
            <div class="form-group">
                <span style="display:flex;">
                    <label>
                        &emsp;记录人&ensp;
                        <input type="text" v-model="formData.recorder" readonly>
                    </label>
                </span>
            </div>
            <div class="form-group">
                <span style="display:flex;">
                    &emsp;&emsp;<label>附件
                        <input type="file" style="display:none;" @change="handleFileUpload">
                        <i class="el-icon-paperclip"></i>
                    </label>
                    <span @click="showFileModal = true">({{ uploadedFiles.length }})</span>
                </span>
                <!-- 模态框 -->
                <el-dialog title="已上传文件列表" :visible.sync="showFileModal">
                    <ul>
                        <li v-for="(file, index) in uploadedFiles" :key="index">
                            {{ file.name }}
                        </li>
                    </ul>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="showFileModal = false">关闭</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>

        <!-- 培训课程部分 -->
        <div class="section-header">
            <h2>培训课程</h2>
            <el-button type="text" @click="addTrainingCourse"><i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <div class="training-course">
            <table class="table-data">
                <thead>
                    <tr>
                        <th>课程编号</th>
                        <th>课程名称</th>
                        <th>授课方式</th>
                        <th>课时(分钟)</th>
                        <th>课程内容</th>
                        <th>授课老师</th>
                    </tr>
                </thead>
                <tbody style="height: 200px;">
                    <tr v-for="(course, index) in trainingCourses" :key="index">
                        <td><input type="text" v-model="course.courseId"></td>
                        <td><input type="text" v-model="course.courseName"></td>
                        <td><input type="text" v-model="course.teachingMethod"></td>
                        <td><input type="number" v-model="course.classHours"></td>
                        <td><input type="text" v-model="course.courseContent"></td>
                        <td><input type="text" v-model="course.teacher"></td>
                    </tr>
                    <tr v-if="trainingCourses.length === 0">
                        <td colspan="6" class="no-data">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 参训人员部分 -->
        <div class="section-header">
            <h2>参训人员</h2>
            <el-button type="text" @click="addParticipant"><i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <div class="participant-info">
            <table class="table-data">
                <thead>
                    <tr>
                        <th>职员编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>分发机构</th>
                        <th>部门</th>
                        <th>职位</th>
                    </tr>
                </thead>
                <tbody style="height: 200px;">
                    <tr v-for="(participant, index) in participants" :key="index">
                        <td><input type="text" v-model="participant.employeeId"></td>
                        <td><input type="text" v-model="participant.name"></td>
                        <td><input type="text" v-model="participant.gender"></td>
                        <td><input type="text" v-model="participant.distributionOrganization"></td>
                        <td><input type="text" v-model="participant.department"></td>
                        <td><input type="text" v-model="participant.position"></td>
                    </tr>
                    <tr v-if="participants.length === 0">
                        <td colspan="6" class="no-data">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 成绩/证书部分 -->
        <div class="section-header">
            <h2>成绩/证书</h2>
            <el-button type="text" @click="addScoreCertificate"><i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <div class="score-certificate">
            <table class="table-data">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>考核方式</th>
                        <th>考核结论</th>
                        <th>证书号</th>
                    </tr>
                </thead>
                <tbody style="height: 200px;">
                    <tr v-for="(scoreCertificate, index) in scoreCertificates" :key="index">
                        <td><input type="text" v-model="scoreCertificate.name"></td>
                        <td><input type="text" v-model="scoreCertificate.assessmentMethod"></td>
                        <td><input type="text" v-model="scoreCertificate.assessmentConclusion"></td>
                        <td><input type="text" v-model="scoreCertificate.certificateNumber"></td>
                    </tr>
                    <tr v-if="scoreCertificates.length === 0">
                        <td colspan="4" class="no-data">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 底部操作按钮部分 -->
        <!-- <div class="action-buttons">
            <button><i class="el-icon-arrow-left"></i></button>
            <button><i class="el-icon-arrow-right"></i></button>
            <button class="save-new">保存新增</button>
            <button>保存</button>
            <button>取消</button>
        </div> -->
    </div>
</template>

<script>
import { formatDate } from '@/utils/date';

export default {
    name: 'InternalTrainingPage',
    data() {
        // 获取当前日期并格式化为 yyyy-MM-dd
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;

        return {
            pickerOptions: {
                onClick(picker) {
                    picker.$emit('pick', new Date());
                }
            },
            trainingCourses: [],
            participants: [],
            scoreCertificates: [],
            uploadedFiles: [],
            showFileModal: false, // 控制模态框显示隐藏的变量
            formData: {
                date: formattedDate,
                number: 'AM-2025-03-17-0001',
                theme: '',
                startTime: '',
                endTime: '',
                trainingOrganization: '',
                trainingLocation: '',
                trainingNumber: '',
                remark: '',
                recorder: '超级用户'
            }
        };
    },
    methods: {
        addTrainingCourse() {
            this.trainingCourses.push({
                courseId: '',
                courseName: '',
                teachingMethod: '',
                classHours: 0,
                courseContent: '',
                teacher: ''
            });
        },
        addParticipant() {
            this.participants.push({
                employeeId: '',
                name: '',
                gender: '',
                distributionOrganization: '',
                department: '',
                position: ''
            });
        },
        addScoreCertificate() {
            this.scoreCertificates.push({
                name: '',
                assessmentMethod: '',
                assessmentConclusion: '',
                certificateNumber: ''
            });
        },
        handleFileUpload(event) {
            const files = event.target.files;
            for (let i = 0; i < files.length; i++) {
                this.uploadedFiles.push(files[i]);
            }
        },
        deleteFile(index) {
            this.uploadedFiles.splice(index, 1);
        }
    }
};
</script>

<style lang="scss" scoped>
/* 全局设置宋体字体 */
* {
    font-family: '宋体', sans-serif;
}

.contract-setting-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.operation-select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.training-course {}

h2 {
    font-size: 1.2em;
    margin: 0;
}

.date-and-number {
    position: relative;
    top: -65px;
    left: 390px;

    input[type="date"] {
        border: none;
        border-bottom: 1px solid #ccc;
        border-radius: 0px;
        background-color: transparent;
    }
}

.date-and-number span {
    margin-right: 5px;
}

.date-and-number input {
    margin-right: 10px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.training-info label,
.training-course h2,
.participant-info h2,
.score-certificate h2 {
    display: block;
    margin-bottom: 5px;
}

.training-info input,
.training-info select,
.training-info textarea {
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.training-info .form-group-row {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    justify-items: start;
}

.training-info .form-group-row .form-group {
    flex: 1;
}

.section-header {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    margin-bottom: 10px;
}

.table-data {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;

    tbody {
        display: contents;
        max-height: 200px;
        overflow-y: auto;
    }
}

.table-data th,
.table-data td {
    border: 1px solid #ccc;
    padding: 8px 1px;
    text-align: center;
}

.table-data th {
    background-color: #f2f2f2;
}

.no-data {
    text-align: center;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.action-buttons button {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

input[type="number"] {
    padding: 1px 0px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
}

input[type="text"] {
    padding: 0px 15px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0px;
    background-color: transparent;
    height: 20px;
    font-family: '宋体';
    color: #000;
}

::v-deep input.el-input__inner {
    padding: 0px 15px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0px;
    background-color: transparent;
    text-align: left;
    height: 20px;
    font-family: '宋体';
    color: #000;
}

::v-deep .el-input__icon {
    display: none;
}

.save-new {
    background-color: #409eff;
    color: white;
    border-color: #409eff;
}

.dialog-footer {
    text-align: right;
}
</style>